<template>
	<view class="page-coach-course-detail">
		<scroll-view class="class-list" scroll-x enable-flex >
			<view :class="['class-btn', index === activeClass ? 'active': '']" v-for="(lesson, index) in lessonList" :key="lesson.lesson_id" @tap="selectClass(index)">{{lesson.name}}</view>
		</scroll-view>
		
		<view class="student-list">
			<view class="not-sign-in">
				<text class="list-title">未签到</text>
				<view class="not-sign-in-students">
					<MxSignInStudent v-for="student in notClockInStudents" :student="student" :classTime="classTime" />
				</view>
			</view>
			
			<view class="signed-in">
				<text class="list-title">已签到</text>
				<view class="signed-in-students">
					<MxSignInStudent v-for="student in clockInStudents" :student="student" :classTime="classTime" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MxSignInStudent from '@/components/mine/coach-course-detail/MxSignInStudent.vue'
	import * as courseApi from '@/api/course.js'
	
	export default {
		components: {
			MxSignInStudent
		},
		data() {
			return {
				activeClass: 0,
				courseId: 0,
				lessonList: []
			};
		},
		computed: {
			clockInStudents() {
				return this.lessonList[this.activeClass]?.students
			},
			
			notClockInStudents() {
				return this.lessonList[this.activeClass]?.notClockIn
			},
			
			classTime() {
				const currLesson = this.lessonList[this.activeClass]
				return currLesson.class_date + ' ' + currLesson.class_time
			}
		},
		onLoad(options) {
			const courseId = options.courseId
			this.courseId = courseId
			console.log(courseId)
		},
		onShow() {
			this.getLessons()
		},
		methods: {
			selectClass(index) {
				this.activeClass = index
			},
			
			getLessons() {
				courseApi.lessons({courseId: this.courseId}).then(res => {
					console.log(res)
					this.lessonList = res.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/var.scss';
.page-coach-course-detail{
	font-family: $font-family;
	color: $color-title;
	.class-list{
		display: flex;
		white-space: nowrap;
		box-sizing: border-box;
		
		/deep/.uni-scroll-view::-webkit-scrollbar {
			display: none
		}
		
		
		.class-btn{
			margin-right: 40rpx;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			// width: 92rpx;
			padding: 30rpx 20rpx;
			// height: 120rpx;
			border-radius: 5px;
			box-shadow: 0 0 3px 0 rgba($color: #000000, $alpha: .16);
			color: #fff;
			margin-top: 56rpx;
			margin-bottom: 40rpx;
			font-size: 14px;
			color: $color-border;
			
			&.active{
				background-image: $bg-gradient;
				color: #fff;
			}
			
			&:first-child{
				margin-left: 34rpx;
			}
		}
	}
	
	.student-list{
		width: 100%;
		box-sizing: border-box;
		padding: 0 24rpx;
		.not-sign-in{
			margin-bottom: 36rpx;
			.not-sign-in-students{
				border-radius: 5px;
				box-shadow: 0 0 6px rgba($color: #000000, $alpha: .16);
			}
		}
		
		.signed-in{
			margin-bottom: 50rpx;
			.signed-in-students{
				border-radius: 5px;
				box-shadow: 0 0 6px rgba($color: #000000, $alpha: .16);
			}
		}
		
		.list-title{
			display: flex;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 26rpx;
		}
	}
}
</style>
